<template>
  <div class="cinema-detail-item-container">
    <nut-cell>
      <div class="main">
        <div class="date-item">
          <div class="title">
            {{ formatShowTime(info?.showTime) }}
          </div>
          <div class="desc">
            {{ formatShowTime(info?.finishTime) }}
            散场
          </div>
        </div>
        <div class="desc-item">
          <div class="type">
            {{ info?.filmName }}
          </div>
          <div class="room">
            {{ info?.hallName }}
          </div>
        </div>
        <div class="price-item">
          <div class="current-price">
            <nut-price :price="info?.pickUpPrice / 100" size="normal" :decimal-digits="2" style="color: #5232b7"
              :thousands="true" />
            <div class="suffix">起</div>
          </div>
          <div class="original-price">
            <nut-price :price="info?.price / 100" size="small" :decimal-digits="2" :thousands="true" strike-through />
          </div>
        </div>
        <div class="operate-item">
          <nut-animate type="breath" :loop="true">
            <nut-button type="primary" color="linear-gradient(to right, #5232B7,#7237BC)" block size="small"
              @click="onClickBuy">
              购票
            </nut-button>
          </nut-animate>
        </div>
      </div>
    </nut-cell>
  </div>
</template>
<script setup lang="ts">
import { computed, toRefs } from "vue";
import moment from "moment";
import Taro from "@tarojs/taro";
const props = defineProps({
  //子组件接收父组件传递过来的值
  list: {
    type: Array<any>,
    required: true,
  },
  currentFilmId: {
    type: [String, Number],
    required: true,
  },
  info: {
    type: Object,
    required: true,
  },
});
//使用父组件传递过来的值
const { list, currentFilmId, info } = toRefs(props);
const onClickBuy = (item) => {
  const a = list.value.find((item) => {
    return item.id == currentFilmId.value;
  });

  Taro.setStorageSync("yinTu", {
    image: a.image,
    showId: info.value.id,
  });
  Taro.navigateTo({
    url: `/pages/select-seat/index?showid=${info.value.id}`,
  });
};
// 【格式化】开场时间
const formatShowTime = computed(() => {
  return (str) => {
    var formattedTime = moment.unix(str / 1000).format("YYYY-MM-DD HH:mm");
    return moment.unix(str / 1000).format("HH:mm");
  };
});
// 【格式化】散场时间
const formatEndTime = computed(() => {
  return (str, duration) => {
    const minutes = Number(duration);
    return moment
      .unix(str / 1000)
      .add(minutes, "minutes")
      .format("HH:mm");
  };
});
</script>
<style lang="scss">
.cinema-detail-item-container {
  display: flex;
  flex-direction: column;

  .nut-cell {
    box-shadow: none;
  }

  .main {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;

    .date-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .title {
        font-weight: 500;
        color: #15181d;
        font-size: 40px;
        line-height: 52px;
      }

      .desc {
        font-size: 24px;
        line-height: 38px;
        color: #858a99;
        margin-top: 10px;
      }
    }

    .desc-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      font-size: 24px;
      line-height: 38px;
      color: #858a99;
      margin-left: 25px;
      font-weight: 500;

      .room {
        margin-top: 10px;
      }
    }

    .price-item {
      display: flex;
      flex-direction: column;

      .current-price {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        font-weight: 500;
        line-height: 30px;

        .suffix {
          color: #858a99;
          font-size: 25px;
          padding-bottom: 10px;
          padding-left: 10px;
        }
      }

      .original-price {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        line-height: 15px;

        .nut-price {
          color: #858a99;
        }
      }
    }

    .operate-item {
      margin-left: 25px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
}
</style>
